<!--------------------------------
 - @Author: Ronnie Zhang
 - @LastEditor: Ronnie Zhang
 - @LastEditTime: 2023/12/05 21:30:11
 - @Email: zclzone@outlook.com
 - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
 --------------------------------->

<template>
  <div class="content">
    <AppPage show-footer>
    <n-card>
      <n-space align="center">
        <n-avatar round :size="100" :src="userInfo.avatar" />
        <div class="ml-20">
          <div class="flex items-center text-16">
            <span>用户名:</span>
            <span class="ml-12 opacity-80">{{ userInfo.nickName }}</span>
            <n-button class="ml-32" type="primary" text @click="pwdModalRef.open()">
              <i class="i-fe:edit mr-4" />
              修改密码
            </n-button>
          </div>
          <div class="mt-16 flex items-center">
            <n-button type="primary" ghost @click="uploadShow=true">
              更改头像
            </n-button>
            <span class="ml-12 opacity-60">
              修改头像只支持在线链接，不提供上传图片功能，如有需要可自行对接！
            </span>
          </div>
        </div>
      </n-space>
    </n-card>

    <n-card class="mt-20" title="个人资料信息">
      <template #header-extra>
        <n-button type="primary" text @click="profileModalRef.open()">
          <i class="i-fe:edit mr-4" />
          修改资料
        </n-button>
      </template>
      <n-descriptions
        label-placement="left"
        :label-style="{ width: '200px', textAlign: 'center' }"
        :column="1"
        bordered
      >
        <n-descriptions-item label="昵称">
          {{ userInfo.nickName }}
        </n-descriptions-item>
        <n-descriptions-item label="手机号码">
          {{ userInfo.phone?userInfo.phone:'暂无' }}
        </n-descriptions-item>
      </n-descriptions>
    </n-card>

     <n-card class="mt-20" title="小程序配置">
      <template #header-extra>
        <n-button type="primary" text @click="wx_configRef.open()">
          <i class="i-fe:edit mr-4" />
          修改配置
        </n-button>
      </template>
      <n-descriptions
        label-placement="left"
        :label-style="{ width: '200px', textAlign: 'center' }"
        :column="1"
        bordered
      >
  
        <n-descriptions-item label="微信通知地址">
          {{ wx_config.notifyAddress?wx_config.notifyAddress:'未设置' }}
        </n-descriptions-item>
        <n-descriptions-item label="appId">
          {{ wx_config.appId ?wx_config.appId:'未设置'}}
        </n-descriptions-item>
        <n-descriptions-item label="appSecret">
          {{ wx_config.appSecret ?wx_config.appSecret:'未设置'}}
        </n-descriptions-item>
        <n-descriptions-item label="商户号">
          {{ wx_config.merchantNumber ?wx_config.merchantNumber:'未设置'}}
        </n-descriptions-item>
        <n-descriptions-item label="商户号key">
          {{ wx_config.merchantKey ?wx_config.merchantKey:'未设置'}}
        </n-descriptions-item>
        <n-descriptions-item label="支付payCert">
          {{ wx_config.payCert ?wx_config.payCert:'未设置'}}
        </n-descriptions-item>
         <n-descriptions-item label="腾讯云域名">
          {{ wx_config.tencent‌Domain ?wx_config.tencent‌Domain:'未设置'}}
        </n-descriptions-item>
          <n-descriptions-item label="腾讯云密钥Secret_id">
          {{ wx_config.tencentSecret_id ?wx_config.tencentSecret_id:'未设置'}}
        </n-descriptions-item>
          <n-descriptions-item label="腾讯云密钥‌Secret_key">
          {{ wx_config.tencent‌Secret_key ?wx_config.tencent‌Secret_key:'未设置'}}
        </n-descriptions-item>
          <n-descriptions-item label="腾讯云cos区域Region">
          {{ wx_config.tencentRegion ?wx_config.tencentRegion:'未设置'}}
        </n-descriptions-item>
          <n-descriptions-item label="腾讯云cos存储桶名Bucket">
          {{ wx_config.tencentBucket ?wx_config.tencentBucket:'未设置'}}
        </n-descriptions-item>
        
      </n-descriptions>
    </n-card>

 

    <MeModal ref="wx_configRef" title="修改配置" width="620px" @ok="update_person()">
      <n-form
        ref="pwdFormRef"
        :model="pwdForm"
        label-placement="left"
        require-mark-placement="left"
      >
        <n-form-item label="微信通知地址" >
          <n-input v-model:value="wx_config.notifyAddress"  placeholder="请输入" />
        </n-form-item>
        <n-form-item label="appId" >
          <n-input v-model:value="wx_config.appId"  placeholder="请输入" />
        </n-form-item>
        <n-form-item label="appSecret" >
          <n-input v-model:value="wx_config.appSecret"  placeholder="请输入" />
        </n-form-item>
        <n-form-item label="商户号" >
          <n-input v-model:value="wx_config.merchantNumber"  placeholder="请输入" />
        </n-form-item>
        <n-form-item label="商户号Key" >
          <n-input v-model:value="wx_config.merchantKey"  placeholder="请输入" />
        </n-form-item>
        <n-form-item label="支付payCert" >
          <n-input v-model:value="wx_config.payCert"  placeholder="请输入" />
        </n-form-item>
          <n-form-item label="支付payKey" >
          <n-input v-model:value="wx_config.payKey" placeholder="请输入" />
        </n-form-item>
          <n-form-item label="腾讯云域名" >
          <n-input v-model:value="wx_config.tencent‌Domain" placeholder="请输入" />
        </n-form-item>
        <n-form-item label="腾讯云密钥Id" >
          <n-input v-model:value="wx_config.tencentSecret_id" placeholder="请输入" />
        </n-form-item>
         <n-form-item label="腾讯云密钥Key" >
          <n-input v-model:value="wx_config.tencent‌Secret_key" placeholder="请输入" />
        </n-form-item>
             <n-form-item label="腾讯云cos区域" >
          <n-input v-model:value="wx_config.tencentRegion" placeholder="请输入" />
        </n-form-item>
         <n-form-item label="腾讯云cos存储桶名" >
          <n-input v-model:value="wx_config.tencentBucket" placeholder="请输入" />
        </n-form-item>
      </n-form>
    </MeModal>

     <MeModal ref="pwdModalRef" title="修改密码" width="420px" @ok="update_person()">
      <n-form ref="profileFormRef" :model="profileForm" label-placement="left">
        <n-form-item label="新密码" >
          <n-input v-model:value="userInfo.password1" placeholder="请输入昵称" />
        </n-form-item>
       
        <n-form-item label="确定吗密码" >
          <n-input v-model:value="userInfo.password2" placeholder="请输入地址" />
        </n-form-item>
      </n-form>
    </MeModal>

    <MeModal ref="profileModalRef" title="修改资料" width="420px" @ok="update_person()">
      <n-form ref="profileFormRef" :model="profileForm" label-placement="left">
        <n-form-item label="昵称" path="nickName">
          <n-input v-model:value="userInfo.nickName" placeholder="请输入昵称" />
        </n-form-item>
       
        <n-form-item label="手机号码" path="address">
          <n-input v-model:value="userInfo.phone" placeholder="请输入地址" />
        </n-form-item>
      </n-form>
    </MeModal>
  </AppPage>

  <n-modal  v-model:show="uploadShow"
      :mask-closable="false"
      preset="dialog"
      style="width: 1000px;"
      :title="'文件管理'"
      content="你确认?"
      positive-text="确定"
      negative-text="关闭"      
      @positive-click="uploadShow=false"
      @negative-click="uploadShow=false"
      >
      <div class="box-upload">
         <Upload type="1" @selectImage="selectImageFun"/>
      </div>
  </n-modal>
  </div>
</template>

<script setup>
import { MeModal } from '@/components'
import { useForm, useModal } from '@/composables'
import { useUserStore } from '@/store'
import { getUserInfo } from '@/store/helper'
import { onMounted,ref } from 'vue'
import Upload from "@/views/upload/index.vue"
import { Https } from "@/utils"
import api from './api'
const uploadShow = ref(false)
const userStore = useUserStore()
const required = {
  required: true,
  message: '此为必填项',
  trigger: ['blur', 'change'],
}

const selectImageFun =(selectImageList) =>{
  userInfo.value.avatar = Https() + selectImageList[0]
  uploadShow.value =false
  update_person()
  
} 


async function update_person() {
  var usersInfo = {
    nickName:userInfo.value.userInfo,
    head_img:userInfo.value.avatar,
    phone:userInfo.value.phone,

    wx_config:JSON.stringify(wx_config.value)
  }
  
  if(userInfo.value.password1 && userInfo.value.password2){
    usersInfo.password = userInfo.value.password1,
    usersInfo.passwordstr = userInfo.value.password1
  }
  

  const res = await api.update_person(usersInfo)
  if(res.code == 200){
    $message.success('修改成功!')
    refreshUserInfo(); //  刷新数据
  }
}

 

onMounted(() => {
  person()
})

const userInfo = ref({
  avatar:''
})
const wx_config = ref({
  "notifyAddress":"",
  "appId":"",
  "appSecret":"",
  "merchantNumber":"",
  "merchantKey":"",
  "payCert":"",
  "payKey":"",
  "tencent‌Domain":"",
  "tencentSecret_id":"",
  "tencent‌Secret_key":"",
  "tencentRegion":"",
  "tencentBucket":"",
})
async function person() {
  const res = await api.person()
  if(res.code == 0){
    console.log(res.data.profile.wx_config)
    if(res.data.profile.wx_config){
      wx_config.value = JSON.parse(res.data.profile.wx_config)
    }
    userInfo.value = res.data.profile
    userInfo.value.password1 = ''
    userInfo.value.password2 = ''
  }
}

const [pwdModalRef] = useModal()
const [pwdFormRef, pwdForm, pwdValidation] = useForm()
const [wx_configRef] = useModal()
function handlePwdSave() {

  if(userInfo.value.password1 == userInfo.value.password2){
    update_person()
  }else{
    $message.error('密码不相同!')
    pwdModalRef.open()

  }
}

const newAvatar = ref(userStore.avatar)
const [avatarModalRef] = useModal()
async function handleAvatarSave() {
  if (!newAvatar.value) {
    $message.error('请输入头像地址')
    return false
  }
  await api.updateProfile({ id: userStore.userId, avatar: newAvatar.value })
  $message.success('头像修改成功')
  refreshUserInfo()
}

const genders = [
  { label: '保密', value: 0 },
  { label: '男', value: 1 },
  { label: '女', value: 2 },
]
const [profileModalRef] = useModal()
const [profileFormRef, profileForm, profileValidation] = useForm({
  id: userStore.userId,
  nickName: userStore.nickName,
  gender: userStore.userInfo?.gender ?? 0,
  address: userStore.userInfo?.address,
  email: userStore.userInfo?.email,
})
async function handleProfileSave() {
  $message.success('资料修改成功')
  refreshUserInfo()
}

async function refreshUserInfo() {
  const user = await getUserInfo()
  userStore.setUser(user)
}
</script>

<style scoped>
  .content{
    height: 100vh;
    overflow-y: auto;
  }
  .box-upload{
  /* width: 1000px; */
  height: 750px;
  width: 100%;

  /* background: white; */
}
.imageUpload{
  width:100px;
  height:100px;
  border:1px solid #eee;
  display: flex;
  justify-content: center;
  border-radius: 6px;
  align-items: center;
}
.imageUpload:hover{
  border:1px solid rgb(49, 108, 114);
}
</style>
